<template>
  <div class="login">
    <div class="login-block">
      <div class="login-title">
        <h1>个人账户登录</h1>
      </div>

      <div class="login-info">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          label-width="70px"
        >
          <div class="login-userCard">
            <el-form-item prop="userCard">
              <span slot="label">
                <i class="el-icon-user-solid" style="font-size: 25px"></i>
              </span>
              <el-input
                type="text"
                maxlength="18"
                placeholder="身份证号码"
                v-model="loginForm.userCard"
              />
            </el-form-item>
          </div>

          <div class="login-password">
            <el-form-item prop="password">
              <span slot="label">
                <i class="el-icon-lock" style="font-size: 25px"></i>
              </span>
              <el-input
                maxlength="10"
                minlength="6"
                placeholder="密码"
                v-model="loginForm.password"
                show-password
              />
            </el-form-item>
          </div>

          <div class="more-info">
            <router-link class="registerPath" to="/register">注册</router-link>
            <router-link class="forgetPwdPath" to="/forgetPwd"
              >忘记密码</router-link
            >
          </div>

          <div class="login-button">
            <el-button
              :loading="loginLoading"
              type="primary"
              v-on:click="onSubmit('loginForm')"
            >
              <span v-if="!loginLoading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        userCard: "",
        password: "",
      },

      loginRules: {
        userCard: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur",
          },
        ],

        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },

      loginLoading: false,

      isOpen: true
    };
  },

  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loginLoading = true;

          // login's api
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$message.success("登录成功");
              this.$router.push("/apply").catch(() => {});
            })
            .catch(() => {
              this.loginLoading = false;
              return false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.login {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../assets/login.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.login-block {
  margin-top: 10%;
  margin-right: 12%;
  float: right;
  width: 350px;
  height: 380px;
  border: 1px solid #ddd;
  background: #fff;
}

.login-title {
  text-align: center;
  width: 350px;
  height: 50px;
  border-bottom: 1px solid #ddd;
}

.login-info {
  width: 300px;
  height: 330px;
  padding-top: 15%;
  padding-bottom: 20px;
}

.more-info {
  width: 230px;
  margin-top: 10px;
  margin-left: 70px;
  margin-bottom: 10px;
  text-align: center;
  height: 20px;
}

.registerPath {
  float: left;
  text-decoration: none;
  color: #444444;
}

.forgetPwdPath {
  float: right;
  text-decoration: none;
  color: #444444;
}

.login-button {
  text-align: center;
  width: 350px;
  font-size: 20px;
}

.login-button .el-button {
  width: 200px;
  font-size: 17px;
}
</style>
